約 3,426,893 件
https://w.atwiki.jp/nicepaper/pages/62.html
前回記事CSSで見出しデザイン1の続き記事です。 今回は疑似要素before,afterを使った見出しの制作方法をご紹介します。 こんなもの 目次 疑似要素before,afterをなぜ使う？ 疑似要素がある場合とない場合で作ってみる。 作り方 コード 作り方まとめ 疑似要素before,afterをなぜ使う？ 一般的な見出しはCSSでよく使われるプロパティ名を組み合わせただけです。例えばborder、border-left、border-bottom、border-radius、padding、padding-left、padding-bottom・・・。それらを組み合わせたり色を変えたりして作られています。しかし、その方法では、 簡単な丸を作ったり、三角形を作ったり、四角形を作ったり、あるいは四角形を回転させたりということはできません。それぞれの図形をCSSで描くことができれば、それをあとは載せてあげて、表示する順序を多少指定してあげるだけでできます。before、afterはそれができるのです。 疑似要素がある場合とない場合で作ってみる。 h1タグで、h1.style1とh1.style3とh1.style5というデフォルトのデザイン（全部コードは同じですが・・・）から疑似要素を追加していきたいと思います。疑似要素を追加したい場合は元のコードのほうに position relative; を追加し、追加したい疑似要素before,afterの方には position absolute;とcontent ""; をそれぞれ追加してあげる必要があります。 作り方 疑似を追加しないデフォルトの見出しのデザインを作り、表示させる。 疑似を追加するためにデフォルトの見出しの最後にposition relative;を付けて疑似の準備をする。 疑似要素のセレクターbefore,afterを用意する。 疑似要素のセレクターbefore,afterの中にposition absolute;とcontent "";を追加してあげる。 図形をCSSで描いていく。 最後に左上からの距離topやleftを記述して図形を調整します。 コード HTML部 !DOCTYPE HTML html head meta charset="utf-8" title 見出しbefore、after /title link rel="stylesheet" type="text/css" href="headline_before.css" /head body div id="box" h1 class="style1" 見出しstyle1デザイン /h1 h1 class="style2" 見出しstyle1デザイン+before /h1 h1 class="style3" 見出しstyle3デザイン /h1 h1 class="style4" 見出しstyle3デザイン+before /h1 h1 class="style5" 見出しstyle5デザイン /h1 h1 class="style6" 見出しstyle5デザイン+before /h1 h1 class="style7" 見出しstyle5デザイン+before+after /h1 /div /body /html CSS部 @charset "utf-8"; /* CSS Document */ #box{ margin 10px auto; width 600px; min-height 600px; padding 20px; border 1px solid #000; } /*見出しstyle1*/ h1.style1{ margin 20px; width 500px; height 30px; font-family "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size 20px; padding-left 50px; background #CFC; } /*見出しstyle2*/ h1.style2{ margin 20px; width 500px; height 30px; font-family "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size 20px; padding-left 50px; background #CFC; position relative;/*疑似要素を使う場合には必要*/ } h1.style2 before{ position absolute;/*中の緑の線を左上から描いていくために必要*/ content "";/*これを入れることで線が表示される準備ができる*/ width 10px;/*中の緑の線の太さ*/ height 24px;/*中の緑の線の高さ*/ background #090;/*中の緑の線の色*/ top 3px;/*中の緑の線の上からの距離*/ left 5px;/*中の緑の線の左からの距離*/ } /*見出しstyle3*/ h1.style3{ margin 20px; width 500px; height 30px; font-family "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size 20px; padding-left 50px; background #CFC; } /*見出しstyle4*/ h1.style4{ margin 20px; width 500px; height 30px; font-family "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size 20px; padding-left 50px; background #CFC; position relative;/*疑似要素を使う場合には必要*/ } h1.style4 before{ position absolute;/*中の緑の丸を左上から描くために必要*/ content "";/*これを入れることで丸が表示される準備ができる*/ border-radius 10px;/*半径10pxの90度の扇形を４つ*/ height 20px;/*直径は20px*/ width 20px;/*直径は20px*/ background #090;/*中の緑の丸の色*/ top 4px;/*中の緑の丸の上からの距離*/ left 5px;/*中の緑の丸の左からの距離*/ } /*見出しstyle5*/ h1.style5{ margin 20px; width 500px; height 30px; font-family "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size 20px; padding-left 50px; background #CFC; } /*見出しstyle6*/ h1.style6{ margin 20px; width 500px; height 30px; font-family "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size 20px; padding-left 50px; background #CFC; position relative;/*疑似要素を使う場合には必要*/ } h1.style6 before{ position absolute;/*中の緑の四角を左上から描くために必要*/ content "";/*これを入れることで四角が表示される準備ができる*/ width 20px; height 20px; background #090;/*中の緑の丸の色*/ top 4px;/*中の緑の丸の上からの距離*/ left 5px;/*中の緑の丸の左からの距離*/ transform rotate(-45deg); -webkit-transform rotate(-45deg); -moz-transform rotate(-45deg); -ms-transform rotate(-45deg); -o-transform rotate(-45deg); } /*見出しスタイル7*/ h1.style7{ margin 20px; width 500px; height 30px; font-family "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size 20px; padding-left 50px; background #CFC; position relative;/*疑似要素を使う場合には必要*/ } h1.style7 before{ position absolute;/*中の左上の緑の四角を左上から描くために必要*/ content "";/*これを入れることで四角が表示される条件が整う*/ width 20px; height 20px; background #090;/*中の緑の左上の四角の色*/ top 4px;/*中の緑の丸の上からの距離*/ left 5px;/*中の緑の丸の左からの距離*/ transform rotate(-45deg);/*回転させる*/ -webkit-transform rotate(-45deg);/*ベンダープレフィックスを付けて回転させる*/ -moz-transform rotate(-45deg);/*ベンダープレフィックスを付けて回転させる*/ -ms-transform rotate(-45deg);/*ベンダープレフィックスを付けて回転させる*/ -o-transform rotate(-45deg);/*ベンダープレフィックスを付けて回転させる*/ } h1.style7 after{ position absolute;/*中の右下の緑の四角を左上から描くために必要*/ content "";/*これを入れることで四角が表示される条件が整う*/ width 10px; height 10px; background #0E0;/*中の緑の右下の四角の色*/ top 16px;/*中の緑の丸の上からの距離*/ left 20px;/*中の緑の丸の左からの距離*/ transform rotate(30deg);/*回転させる*/ -webkit-transform rotate(30deg);/*ベンダープレフィックスを付けて回転させる*/ -moz-transform rotate(30deg);/*ベンダープレフィックスを付けて回転させる*/ -ms-transform rotate(30deg);/*ベンダープレフィックスを付けて回転させる*/ -o-transform rotate(30deg);/*ベンダープレフィックスを付けて回転させる*/ } するとこのようになります。 作り方まとめ 作り方のフローは次の通りです。 疑似を追加しないデフォルトの見出しのデザインを作り、表示させる。 疑似を追加するためにデフォルトの見出しの最後にposition relative;を付けて疑似の準備をする。 疑似要素のセレクターbefore,afterを用意する。 疑似要素のセレクターbefore,afterの中にposition absolute;とcontent "";を追加してあげる。 図形をCSSで描いていく。（注1） 最後に左上からの距離topやleftを記述して図形を調整します。 ※四角や長方形ならwidthとheightとbackground、円ならwidthとheightとborder-とborder-radiusを付け加えていきます。回転させる場合は（円は必要ないけど・・）、transform rotate(角度)を追加していきます。 うーん。ちょっとわかりにくいかもですね。どれか重点的に解説したほうがよさそうです。どこを解説すべきでしょうか？コメントください。 名前 コメント
https://w.atwiki.jp/designnohikidashi/pages/40.html
▽デザインのひきだし 第30巻△ デザインのひきだし30 初版第1刷発行 2017年2月25日 編者 グラフィック社編集部 発行社 長瀬聡 発行所 グラフィック社 表紙印刷 株式会社協和プロセス 印刷・製本 図書印刷株式会社 アートディレクション デザイン 鈴木千佳子 デザインアシスタント 窪田実莉鈴木久美子 撮影 弘田充井上佐由紀 執筆・協力 大城譲司金子哲郎上條桂子河内秀子杉瀬由希 編集・執筆 雪朱里 企画・編集・執筆 津田淳子（グラフィック社） 160P ISBN-10 476612992X ISBN-13 9784766129922 CONTENTS 00 特集 新しい特殊印刷加工の教科書 ※CONTENTSの頁表記なし 006 特集 南ドイツの製本工房を訪ねる刻印入り三方金ができるのは世界でもここだけ!リヒャルト･マイヤー製本工房 012 特集 イタリアの彫刻版を追う!リアルで複雑、繊細なエンボス加工ができる!カルロ･ガスペリーニ社 016 特集 これどうなってるの!? 本誌表紙はこうしてできている。 018 特集 特殊印刷加工108種類紹介 019 特集 技術別インデックス 021 特集 キラキラ 001 箔押し 022 特集 002 箔押し（つばめ返し） 023 特集 003 箔押し（2色押し） 024 特集 004 箔押し+エンボス加工 025 特集 005 コールドフォイル 026 特集 006 小口金付加工（天金加工／三方金） 027 特集 007 箔の種類（村田金箔） 028 特集 008 箔の種類（カタニ産業） 029 特集 009 箔の種類（クルツジャパン） 030 特集 010 箔押し（SFX） 031 特集 011 箔押し（DIGITAL METAL） 032 特集 012 振り金加工 033 特集 013 メタリック印刷（スクリーン印刷） 034 特集 014 ラインストーン印刷 035 特集 015 ラメ印刷 036 特集 016 鏡面インキ（ミラー印刷） 037 特集 017 シャンパンゴールドワニス（スクリーン印刷） 038 特集 018 フラットシルバー（オフセット用・明銀インキ） 039 特集 019 オフセット用メタリックインキ「LR輝」 040 特集 020 オフセット用メタリックインキ「雅」 041 特集 021 Kaleido Plus®+Silver 042 特集 022 UVオフセットによる金銀印刷 043 特集 023 蒸着フィルム／ホロフィルム貼り合わせ+オフセット印刷 044 特集 024 PETシートへのホログラム加工 045 特集 025 コーター付きUVオフセット印刷機によるラメ印刷 046 特集 鮮やか 026 コールドフォイル+UV蛍光印刷 047 特集 027 オフセット用蛍光インキ「TOKA FLASH VIVA DX」 048 特集 028 オフセット用広演食インキ「Kaleido Plus®」 049 特集 029 蛍光印刷（スクリーン印刷） 050 特集 スケスケ 030 窓貼り加工 051 特集 031 透かしインキ 052 特集 032 ワックスプラス 053 特集 033 ロウ引き 054 特集 034 パチカへの加熱型押し 055 特集 凸凹 035 バーコ印刷 056 特集 036 銅版印刷（エングレービング） 057 特集 037 エンボス（彫刻版） 058 特集 038 エンボス加工（腐食版） 059 特集 039 紙全体へのエンボス加工 060 特集 040 空押し 061 特集 041 影押し 062 特集 042 凸和紙（decor washi） 063 特集 043 透明ニスの厚盛り 064 特集 044 透明ニスの厚盛り（テクスチャー印刷） 065 特集 045 色つきニスの厚盛り（UVデコレート印刷） 066 特集 046 滑り止め印刷 067 特集 047 ラバー印刷 068 特集 048 エンボスルック 069 特集 049 点字印刷 070 特集 ふわふわ 050 フロッキー加工 071 特集 051 発泡印刷 072 特集 052 シュープリント 073 特集 053 和紙（落水紙）貼り合わせ 074 特集 054 不織布貼り合わせ+オフセット印刷 075 特集 手触り感 055 リオトーン印刷 076 特集 056 ちぢみ印刷 077 特集 057 ステンドグラス調印刷／クラック印刷 078 特集 058 ソフトフィールワニス（スクリーン印刷） 079 特集 見え方が変わる! 059 スクラッチ印刷（スクリーン印刷） 080 特集 060 スクラッチ印刷（オフセット） 081 特集 061 スクラッチカラーリング印刷（スクリーン印刷） 082 特集 062 レンチキュラー 083 特集 063 リフレクト印刷S 084 特集 064 アクアフィック印刷 085 特集 065 ソーラー印刷（フォトクロミック印刷） 086 特集 066 水発色インキ 087 特集 067 メタモカラー 088 特集 068 蓄光印刷 089 特集 069 偏光パールインキ（スクリーン印刷） 090 特集 070 偏光メタリックインキ（フレキソ印刷） 091 特集 071 フレキソ偏光パール 092 特集 072 ルミナスパレット（ブラックライト印刷） 093 特集 073 忍者インク 094 特集 074 ミラクルビジョンフラッシュ 095 特集 075 示温インキ 096 特集 レトロ 076 活版印刷 097 特集 077 原色版印刷 098 特集 078 レタープラス（金属版による活版印刷） 099 特集 079 レトロ印刷（デジタル孔版印刷） 100 特集 表面加工 080 擬似エンボス 101 特集 081 PP貼り加工 102 特集 082 LCコート 103 特集 特殊な紙への印刷 083 和紙への印刷 104 特集 084 薄紙印刷（枚葉） 105 特集 085 薄紙印刷（輪転） 106 特集 086 厚紙印刷 107 特集 087 Gフルート段ボール印刷 108 特集 088 デジタル長尺印刷 109 特集 紙の加工 089 合紙 110 特集 090 紙象嵌 111 特集 091 Vカット加工 112 特集 092 ななめもーる 113 特集 093 レーザーカット 114 特集 094 型抜き加工（トムソン） 115 特集 095 型抜き加工（ブッシュ／ポンス） 116 特集 その他 096 香料インキ 117 特集 097 しるはく 118 特集 098 ネイルシール印刷 119 特集 099 ペンパッド印刷 120 特集 100 用紙への最適化処理を行なう特殊製版加工 121 特集 101 レインボー印刷 122 特集 102 セキュリティ印刷 123 特集 103 ケセルシ印刷 124 特集 104 水塗り絵インキ（水溶性インキ） 125 特集 105 ビーズ印刷 126 特集 106 可食印刷 127 特集 107 粘着加工 128 特集 108 転写シール 129 連載 もじモジ探偵団 File04[道路の文字] 134 連載 祖父江慎の実験だもの。 138 連載 もじのひと 第8回[松家仁之さん／文字に託すこと。ひとに託すこと。] 143 記事 今号の本誌本文用紙 144 記事 編集部注目PICK UP！ [トーンF] 146 連載 本づくりの匠たち [誰も知らない印刷大名の世界。史上初の藩主印刷マップに仰天!] 152 記事 編集部注目PICK UP！ [レザック16] 154 連載 デザインを考えない 第16回[個人的なデザインを考えない] 156 記事 ひきだし通信 Vol.21 奥付後ペラ 連載 俺にagree 第6回 文：塚田哲也（大日本タイポ組合） 本文用紙 用紙協力： P001~130 OKピクシードソフィア 95g/m² P131~160 OKスプリーム 95g/m²
https://w.atwiki.jp/kumicit/pages/1034.html
Kumicitのコンテンツ インテリジェントデザイン概説 インテリジェントデザインの神学 インテリジェントデザインと新たなる創造 新たなる種族の登場を否定できない インテリジェントデザインの"強い主張"は、「現生人類は突如出現した」というものである。 The abrupt appearance of Homo as a novel and distinct form, significantly different from earlier fossil forms and without links to previous fossil forms, implicates intelligent design as a cause involved in the origin of Homo. まったく新しく、これまでと異なった外見を持つ現生人類の突如の出現は、初期の化石に残された形態と著しく異なり、それまでの化石に残された形態とつながりもないので、現生人類の起源にかかわる原因としてインテリジェントデザインを意味する。 [ Casey Luskin Human Origins and Intelligent Design, 2005 ] これを読むと、SFファンなら誰もが思いつきそうなネタがある。それを、SFアンソロジー"Intelligent Design"の編集者Denise Littleも前書きに書いている： Since it is clear from the evidence that mass extinctions happened, if intelligent design truly is behind the shape of the world, it s also clear that God can change Hs mind and change directions on a dime. We may dominate the planet now, but, like dinosaurs, it s possible we could be replaced. 大量絶滅が起きた明白な証拠があるので、世界の形成の背後にインテリジェントデザインが本当にあるなら、神は自身の意志を変えることができて、ただちに方向転換可能だというのも明白だ。我々は今は地球を支配しているが、恐竜のように、取って代わられるかもしれない。インテリジェントデザインが正しければ、むしろ、突如として出現した新たな種族によって、人類が滅ぼされることは不可避と考えるべきかもしれない。 [ Denise Little "Introduction" in "Intelligent Design" , p.2] ] 聖書と地質学の整合性をとろうとした コンコーディズム の担い手のひとりであるスコットランドのアマチュア地質学者・著述業 Hugh Miller (1802 - 1856)。彼はまず、あらゆる生物はいずれは滅亡すると説いた。そしてさらに、複雑な状態と性質を持つ人間の王朝もまた最終的なものではなく、 さらなる創造があると主張していた 。 そうならないことを、インテリジェントデザイン"理論"は一切保証しない。保証するのは創世記の記述のみ： 天地万物は完成された。第七の日に、神は御自分の仕事を完成され、第七の日に、神は御自分の仕事を離れ、安息なさった。この日に神はすべての創造の仕事を離れ、安息なさったので、第七の日を神は祝福し、聖別された。[創世記第2章1-3節] これでエネルギー保存則が成立し、新たなる創造行為がないことが保証される。すなわち、突如として新たなる支配種族が登場しないことが保証される。 インテリジェントデザインの語り直しのもとたる、ヨハネによる福音書は保証しそうにない。 初めに言があった。言は神と共にあった。言は神であった。 この言は、初めに神と共にあった。 万物は言によって成った。成ったもので、言によらずに成ったものは何一つなかった。 [ヨハネによる福音書第1章1-3節]
https://w.atwiki.jp/qcraft/pages/30.html
デザインパーツ 概要 デザインパーツには、幾何学的な形のパーツが全110個あります。 パーツ一覧 カクカクＳ字 抽選箱 ボール乗せ シリンダー 深めのお皿 三角フラスコ 障害物1 高い脚立 低い脚立 スポーク Ｌ字型シリンダー 障害物2 Ｓ字フック 障害物3 U字【大】 Ｖ字【大】 大きな水槽 ビーカー お皿 ボウル チェーンA チェーンB 障害物4 聖杯 クリップ型シリンダー 歯車 トング 十字フレーム【細】 コップ【Ｍ】 ティッシュ箱 浅いお皿 ドミノ 長い棒 サッカーゴール ハット くるりん棒【細】 長四角のフレーム トルソー 丸底フラスコ クスリビン 落ちものブロック４こ 障害物５ 障害物６ ヌンチャクＡ ヌンチャクＢ 穴あきリング さすまた かど丸四角フレーム【小】 天秤 落ちものブロック トンファー 五角形の入れ物 ウインナー 曲がったウインナー 星【左】 星【右】 フラッグ【短】 トゲトゲボール ハーフパイプ 地面に大穴 大きなビン 長四角フレーム【中央穴】 ワイングラス 欠けた額縁 カベのフック 渦巻き ハーフパイプに穴５つ ゲート 障害物７ Ｍ字 Ｕ字【小】 Ｕ字【欠け】 くるりん棒【太】 釣り針 長四角フレーム【端に穴】 ジグザグフレーム Ｃ字 お皿【さすまた】 お皿【シリンダー】 お皿【ルーペ】 さすまた【幅広】 さすまた【幅広＆長い】 欠けたクリップ Ｕ字フレーム【長】 スロープに穴５つ Ｖ字【小】 歪んだゼムクリップ 片細ゼムクリップ 隔たれたリング つづみ ゼムクリップ【欠け】 片細ゼムクリップ【欠け】 Ｕ字フレーム【短】 十字フレーム【太】 穴あきボール トライアングル くるりん棒【十字】 バケツ ジグザグ ビン シャンパングラス 十字フレーム【太/穴】 不安定なお皿 角が穴の三角 隔たれた三角フレーム トンネル チェーンＣ ぐるぐる迷路 大きなS字フック ビンのフタ
https://w.atwiki.jp/otokakioekaki/pages/21.html
デザイン案を考える前に、必要な情報を整理したほうがいいと思ったのでページを作ってみた。 ゲスト用は会員用から削ればいいだけなので、とりあえず会員用として考えてみます。 箇条書きの下に適当な意見を書いてますので、適当に編集するなりしてみて下しあ。 てか機能案、要望まとめあたりは全然見てないわし…… 共通項目 ロゴ ログインログアウト＋ようこそ～さんの部分 上部メニュー(トップ、マイページ、投稿／管理、ファン、コレクション、メッセージ、設定、ガイド、チャット等) 検索 まどなみ（広告欄） スイミーからのお知らせ サイト情報 下部メニュー 利用規約 プライバシーポリシー クレジット とりあえず思いついただけ書いてみた。それぞれのページで表示させないものとかは、また考えれば^q^ 上部メニューの項目はもうすこし整理したほうがいい気もす。 下部メニューって書いたけど、メニューって形じゃなくてもいいかも。ガイドヘルプ系は上と下で重複させたほうがいい気がするので。 退会はわかりやすいほうがいいと思うけど、項目としてあったほうがいいのか無いほうがいいのかわからない。 トップページ 新着（イラスト、音楽、小説、写真等） ランダム（上に同じ） ホット（上に同じ） ランキング（上に同じ？） サムネはもうちょっと大きい方がいいかもねそうかもね。 検索ボックス以外にも、もうすこし作品探し系のメニュー？が必要な気もす。 作品ページ 作品 作品タイトル タグ 作者情報 前後作品へのリンク 作品情報（投稿時間、閲覧数等） コメント欄 最近投稿した作品 作品と同じフォルダにある作品（でいいのかな？） 特に思いつかないのでとりあえず現状のものを。 作品タイトルに同じページへのリンクはいらない気がす。 マイページ ユーザーのプロフ画像 プロフへのリンク ユーザーランク つぶやき窓 マイ（ファン、フレンド、ワード） お知らせ まだ有るけど、とりあえずここは置いておこう…… コメント欄 名前 コメント
https://w.atwiki.jp/macro/pages/11.html
https://w.atwiki.jp/macro/pages/2.html
メニュー トップページ ●PhotoShopの操作 基本操作 ショートカット レイヤー操作 ●画像の編集 画像の解像度 画像の種類 Ｗｅｂ画像の生成 画像のリサイズ? 画像のトリミング 画像の色補正? 画像の選択? 画像の合成? 画像の特殊加工? Ｗｅｂパーツ作成? アクション設定? ●リンク PhotoShop Xoops 更新履歴 取得中です。
https://w.atwiki.jp/macro/pages/8.html
https://w.atwiki.jp/macro/
https://w.atwiki.jp/catdesign/pages/9.html
@wikiにはいくつかの便利なプラグインがあります。 アーカイブ コメント ニュース 人気商品一覧 動画(Youtube) 編集履歴 関連ブログ これ以外のプラグインについては@wikiガイドをご覧ください = http //atwiki.jp/guide/